<template>
	<div class="iframeMain">
		<!-- 左侧菜单组件 -->
		<Menu></Menu>
		
		<div class="rightContent" :style="{
			left: isCollapse == false ? '200px' : '64px',
			transition: 'left 0.5s'
		}">
			<Top></Top>
			<Nav></Nav>

			<ContentViews :cachedViews="cachedViews"></ContentViews>
		</div>
	</div>
</template>

<script>
	import { mapState } from "vuex"
	import Menu from "@/components/Menu"
	import Top from "@/components/Top"
	import Nav from "@/components/Nav"
	import ContentViews from "@/components/ContentViews"
	
	export default {
		name: 'Main',
		data () {
			return {
				
			}
		},
		
		computed: {
			...mapState(['isCollapse', 'menuList', 'navList']),

			cachedViews () {
				return this.$store.state.cachedViews;
			}
		},
		
		components: {
			Menu,																						// 左侧菜单组件
			Top,																						// 右侧顶部组件
			Nav,																						// 导航组件
			ContentViews,																				// 视图组件
		},
		
		methods: {
			
		},
		
		created () {
			let that = this;
			
			// 解决页面刷新时，导航与当前页面不符的问题，这个地方的代码和nav.vue中的代码在没有好的方案之前最好别动
			// 这是为了解决用户在地址栏输入地址时，页面tag不显示等问题的
			if (window.performance.navigation.type == 1) {
				that.navList.forEach((item, index) => {
					if (item.actived) {
						if (item.router !== that.$route.path) {
							let obj = {
								name: that.$route.name,
								title: that.$route.meta.title,
								actived: true,
								router: that.$route.path,
								meta: {
									keepAlive: that.$route.meta.keepAlive,
								}
							}

							that.$store.commit("addTag", obj);
							that.$store.commit("cache", obj);// 缓存路由
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	@import "../../assets/css/common.css";
	@import "../../assets/css/main.css";
</style>
